<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">

</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <!-- 导航 -->
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <!-- 侧边栏 -->
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="15"></c-slider>
        </nav>
      </div>
    </aside>
    <!-- main -->
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">员工数据</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                    <li class="breadcrumb-item active">员工数据</li>
                </ol>
            </div>
        </div>
        <div class="row bgfff p-t-30 p-l-30 p-r-31 p-b-30 m-b-20">
          <el-row style="width: 100%">
            员工数据列表
          </el-row>
          <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
            <div class="m-r-21">
              <el-form ref="form" :model="form" inline="true" label-width="80px">
                <el-form-item label="员工姓名">
                  <el-input v-model="form.name" clearable ></el-input>
                </el-form-item>
                <el-form-item label="排序">
                  <el-select v-model="form.sort" clearable placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchPage" class="btncss">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-row style="overflow-x:auto;width: 100%;display:block;">
            <el-table border align="center"  highlight-current-row
                    :data="tableData"
                    style="overflow-x:auto;width: 100%;display:block;" >
              <el-table-column align="center" type="index" width="50"  label="序号"> </el-table-column>
              <el-table-column align="center" prop="name" label="员工姓名"  width="150"> </el-table-column>
              <el-table-column align="center"  prop="department" label="职务" width="120"> </el-table-column>
              <el-table-column align="center" prop="shareEssayNum" label="分享文章数"> </el-table-column>
              <el-table-column align="center" prop="essayNum"  label="获客数" > </el-table-column>

              <el-table-column align="center" fixed="right" label="操作"  width="170">
                <template slot-scope="scope">
                  <el-button type="text"  size="small" @click="detail(scope.row)">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row  style="margin-top:10px;">
            <el-pagination
                           layout="total, sizes, prev, pager, next"
                           :current-page="current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pageSize"
                           :total="totalCount"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />
          </el-row>
          <div class="fs14 p-t-18 p-b-15"></div>
        </div>
      </div>
    </div>
  </div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<script>
  $(function () {

    var vw = new Vue({
      el: '#main-wrapper',
      data: {
        couponList: [],
        totalCount : 0,
        pubState:true,
        current: 1 ,
        pageSize:10,
        tableData: [],
        form:{
          name:'',
          sort:''
        },
        <!--   排序：1  2 3 4 5 6-->
        options:[{id:1,name:"分享文章数由高到低"},{id:2,name:"分享文章数由低到高"},{id:3,name:"分享次数由高到低"},{id:4,name:"分享次数由低到高"},{id:5,name:"获客数由高到低"},{id:6,name:"获客数由低到高"}]
      },
      mounted() {
        this.searchPage();
      },
      methods: {
        detail(row){
          window.location.href ="staffDataDetail.html?userId="+row.userId+'&name='+row.name;
        },
        searchPage(){
          const setting = {
            data : {
              pageSize : this.pageSize,
              pageNum : this.pageNum,
              name: this.form.name,
              sort:this.form.sort
            }
          }
          $.cAjax('/crmPc/customerEssay/queryStaffData',setting).then(data => {
            if(data){
              this.tableData = data.list;
              this.totalCount = data.total;
            }
          }).catch(function (err) {
          });
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize
          this.searchPage();

        },
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage
          this.searchPage();
        }
      },

    })
  })
</script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <style type="text/css">
    .btncss{
      background-color: #51CDCB;
      border: 1px #51CDCB solid;
      color: white;
      margin-left: 20px;
    }
  </style>
</body>
</html>

